<template>
  <div class="login">
    <div class="login-content">
      <div class="login-left">
        <div class="login-time">欢迎使用</div>
        <img src="../assets/img/zxwy.jpg" class="img" />
        <p class="title">智学无忧商城后台登录</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">登录</h4>
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
          >
            <div class="el-button el-button--default">
              <i class="el-icon-user"></i>
            </div>
            <el-form-item prop="name">
              <el-input
                placeholder="请输入用户名"
                type=""
                v-model="ruleForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <div class="el-button el-button--default">
              <i class="el-icon-key"></i>
            </div>
            <el-form-item prop="pass" style="margin-left: 0px">
              <el-input
                style="margin-left: 0px"
                placeholder="密码"
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <button class="el-button el-button--default">
              <i class="el-icon-position"></i>
            </button>
            <el-form-item>
              <el-input
                placeholder="请输入验证码"
                v-model.number="ruleForm.age"
              ></el-input>
            </el-form-item>
            <div class="el-checkbox">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
            <el-form-item>
              <div class="logins" @click="submitForm()">
                <span>登录</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Base64 from "../util/Base64.js";
import login from "./../api/login";
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      console.log(rule, value, callback);
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
    };
    //   账号
    var validatePass2 = (rule, value, callback) => {
      if (!value.trim()) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    //密码
    var validatePass = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("输入内容不能为空"));
      } else {
        callback();
      }
    };
    return {
      checked: false,
      ruleForm: {
        pass: "",
        name: "",
        age: 66666,
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        name: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      let that = this;
      login.login(that.ruleForm).then((res) => {
        console.log(res);
        if (res.data.errmsg == "成功") {
          if (that.checked) {
            that.$cookie.set("username", Base64.encode(that.ruleForm.name));
            that.$cookie.set("password", Base64.encode(that.ruleForm.pass)); //密码
            // that.$cookie.set("verifica", that.ruleForm.verification); //验证码
          } else {
            // 清除加密
            that.$cookie.remove("username");
            that.$cookie.remove("password");
          }
          that.$cookie.set("Token", res.data.data);
          that.$router.push('/Home')
          // that.$router.go(-1)
          that.$message({
            message: "恭喜你登录成功",
            type: "success",
          });
        }
        if (res.data.errmsg !== "成功") {
          that.$message.error(res.data.errmsg);
        }
      });
    },
    //记住密码
    // change(){
    // console.log(this.checked)
    // this.checked=true

    // },
  },
  //解密
  created() {
    if (this.$cookie.get("username")) {
      this.checked = true;
      this.ruleForm.name = Base64.decode(this.$cookie.get("username")); //解密账号
      this.ruleForm.pass = Base64.decode(this.$cookie.get("password")); //解密密码
    }
  },
};
</script>
<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  display: flex;
  margin: 0 auto;
  background: url(/img/cloud.bef3ccbc.jpg) 0 bottom repeat-x #049ec4;
}
.logins {
  width: 100%;
  height: 45px;
  border: 1px solid #409eff;
  background: none;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 300;
  color: #409eff;
  cursor: pointer;
  font-family: "neo";
  transition: 0.25s;
  display: flex;
  position: absolute;
  top: 48px;
  left: -20px;
}
.logins span {
  margin: auto;
}
.sel-button {
  border: 1px solid steelblue;
  margin-top: 50px;
  height: 30px;
}
.el-checkbox {
  position: absolute;
  left: 77px;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  margin-bottom: 11px;
}
.el-button {
  position: absolute;
  left: 133px;
  border: none;
  background: transparent;
}
.el-form-item/deep/input {
  background: transparent;
  border: none;
  border-radius: 0;
  color: #333;
  border-bottom: 1px solid #ebedf2;
  display: inline;
}

.login-content {
  margin: 0 auto;
  width: 1000px;
  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
}
.login-main {
  margin: 0 auto;
  width: 65%;
  box-sizing: border-box;
}
.login-title {
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
}
.login-left {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  justify-content: center;
  flex-direction: column;
  background-color: #409eff;
  color: #fff;
  float: left;
  width: 50%;
  position: relative;
}
.login-border {
  border-left: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #fff;
  background-color: #f5f7fa;
  width: 50%;
  float: left;
  box-sizing: border-box;
}
.login-left,
.login-border {
  position: relative;
  min-height: 500px;
  align-items: center;
  display: flex;
}
.login-time {
  position: absolute;
  left: 20px;
  top: 25px;
  width: 100%;
  color: #fff;
  font-weight: 200;
  opacity: 0.9;
  font-size: 18px;
  overflow: hidden;
}
.login-left .img {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  text-align: center;
}
.login-left .title {
  margin-top: 60px;
  text-align: center;
  color: #fff;
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 25px;
}
</style>
